<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>代理列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <!-- 搜索问卷问题 -->
                <el-input v-model="query.param.agentName" placeholder="企业名" class="handle-input mr10"></el-input>
                <el-input v-model="query.param.contactName" placeholder="联系人" class="handle-input mr10"></el-input>
                <el-select v-model="query.param.level" placeholder="等级" class="handle-select mr10">
                    <el-option key="1" label="一级代理商" value="1"></el-option>
                    <el-option key="2" label="二级代理商" value="2"></el-option>
                </el-select>
                <el-select v-model="query.param.distinguish" placeholder="模式" class="handle-select mr10">
                    <el-option key="1" label="企业" value="1"></el-option>
                    <el-option key="2" label="个人" value="2"></el-option>
                </el-select>
                <el-select v-model="query.param.status" placeholder="状态" class="handle-select mr10">
                    <el-option key="1" label="待申请" value="1"></el-option>
                    <el-option key="2" label="正常" value="2"></el-option>
                    <el-option key="3" label="冻结" value="3"></el-option>
                </el-select>
                <!-- 搜索按钮 -->
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <!-- 批量冻结 -->
            </div>
            <!-- 用户列表 -->
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="60" align="center" prop="id"></el-table-column>
                <!-- 用户名 -->
                <el-table-column prop="agentName" label="企业名称" align="center"></el-table-column>
                <!-- 联系人姓名 -->
                <el-table-column prop="contactName" label="联系人" align="center"></el-table-column>
                <!--  -->
                <!-- <el-table-column prop="level" label="子父级"  align="center"></el-table-column> -->
                <!-- 手机号 -->
                <el-table-column prop="contactPhone" label="手机号" align="center"></el-table-column>
                <!-- 邮箱 -->
                <el-table-column prop="contactEmail" label="邮箱" align="center":show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="代理商" align="center">
                    <template slot-scope="scope">
                        {{scope.row.distinguish == 1 ? '企业' : ''}}
                        {{scope.row.distinguish == 2 ? '个人' : ''}}
                    </template>
                </el-table-column>
                <el-table-column label="代理等级" align="center">
                    <template slot-scope="scope">
                        {{scope.row.level == 1 ? '1级代理' : ''}}
                        {{scope.row.level == 2 ? '2级代理' : ''}}
                    </template>
                </el-table-column>
                <!-- 注册时间 -->
                <el-table-column prop="createTime" label="申请时间 " width="180" align="center"></el-table-column>
                <!--1-正常 2-冻结-->
                <el-table-column label="操作" align="center" width="250px">
                    <template slot-scope="scope">
                        <el-button type="text" v-if="scope.row.status == 1" @click="stateClick(scope.row)">待审核
                        </el-button>
                        <el-button type="text" v-if="scope.row.status == 2" @click="stateClick(scope.row)">冻结
                        </el-button>
                        <el-button type="text" v-if="scope.row.status == 3" @click="stateClick(scope.row)">解除冻结
                        </el-button>
                        <el-button
                                v-if="scope.row.status == 2"
                                type="text"
                                @click="goodsLists(scope.$index, scope.row)"
                        >商品列表
                        </el-button>
                        <el-button
                                v-if="scope.row.status == 2"
                                type="text"
                                @click="orderLists(scope.$index, scope.row)"
                        >订单列表
                        </el-button>
                        <el-button
                                v-if="scope.row.status == 2"
                                type="text"
                                @click="setUp(scope.$index, scope.row)"
                        >设置分利
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 页码功能 -->
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageNum"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <el-dialog :title="title" :visible.sync="detailss" width="85%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="公司名称">
                    <el-input v-model="form.agentName" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input v-model="form.contactName" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="合法人以及个人" v-if="form.distinguish == 1">
                    <el-input v-model="form.legalPerson" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.contactPhone" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="执照" v-if="form.distinguish == 1">
                    <el-upload
                            class="avatar-uploader"
                            :headers="myHeaders"
                            :action="uploadsrc"
                            accept="image/jpeg,image/gif,image/png"
                            list-type="picture-card"
                            :limit="6"
                            :before-upload="handleBeforeUpload"
                            :on-success="uploadSuccess"
                            :on-error="uploadError"
                            :on-remove="handleRemove"
                            :data="pdfData"
                            :file-list="business"
                    >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" v-model="form.businessLicense">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="工商营业执照号" v-if="form.distinguish == 1">
                    <el-input v-model="form.businessLicenseNumber" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="身份证">
                    <el-upload
                            class="avatar-uploader"
                            :headers="myHeaders"
                            :action="uploadsrc"
                            accept="image/jpeg,image/gif,image/png"
                            list-type="picture-card"
                            :limit="6"
                            :before-upload="handleBeforeUpload"
                            :on-success="uploadSuccess"
                            :on-error="uploadError"
                            :on-remove="handleRemove"
                            :data="pdfData"
                            :file-list="certif"
                    >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" v-model="form.certificates">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="form.certificateNumber" placeholder=""></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="detailss = false">取消审核</el-button>
                    <el-button type="primary" @click="updateClick(form)">通过审核</el-button>
                </span>
        </el-dialog>
        <!-- 商品列表 -->
        <el-dialog :title="title" :visible.sync="goodslist" width="85%">
            <el-table
                    :data="goodsList"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column prop="title" label="标题" align="center"></el-table-column>
                <el-table-column prop="price" label="价格" align="center"></el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template slot-scope="scope">
                        {{scope.row.status == 0 ? '下架' : ''}}
                        {{scope.row.status == 1 ? '上架' : ''}}
                        {{scope.row.status == 2 ? '删除' : ''}}
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="goodslist = false">确定</el-button>
                </span>
        </el-dialog>
        <!-- 订单列表 -->
        <el-dialog :title="title" :visible.sync="orderlist" width="85%">
            <el-table
                    :data="orderList"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column prop="orderNumber" label="订单号" align="center"></el-table-column>
                <el-table-column prop="payType" label="支付类型" align="center"></el-table-column>
                <el-table-column prop="status" label="代理商" align="center">
                    <template slot-scope="scope">
                        {{scope.row.orderStatus == 1 ? '未支付' : ''}}
                        {{scope.row.orderStatus == 2 ? '已支付' : ''}}
                        {{scope.row.orderStatus == 3 ? '已发货' : ''}}
                        {{scope.row.orderStatus == 4 ? '已收货' : ''}}
                        {{scope.row.orderStatus == 5 ? '未支付取消订单' : ''}}
                        {{scope.row.orderSubStatus == 7 ? '退货申请' : ''}}
                        {{scope.row.orderSubStatus == 8 ? '退货货物快递中' : ''}}
                        {{scope.row.orderSubStatus == 9 ? '退货成功' : ''}}
                        {{scope.row.orderSubStatus == 10 ? '退货失败' : ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="actualPrice" label="实际支付金额" align="center"></el-table-column>
                <el-table-column prop="profitPrice" label="该代理获得金额" align="center"></el-table-column>
            </el-table>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="orderlist = false">确定</el-button>
                </span>
        </el-dialog>
        <!-- 订 -->
        <el-dialog :title="title" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="70px">

                <el-form-item label="分利类型:" label-width="200px">
                    <el-select placeholder="请选择" v-model="form.shareType==1?'按百分比':'具体金额'">
                        <el-option key="1" value="按百分比"></el-option>
                        <el-option key="2" value="具体金额"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="百分比小数点/具体金额:" label-width="200px">
                    <el-input v-model="form.numericalValue" type="number"
                              placeholder="type:1 值为0-1 小数点4位  type:2 值为不超过商品本身的价格"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="determine(form)">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>
<!-- 功能实现 -->
<script>
    import { fetchData } from '../../../api';
    import { userList } from '@/api/api.js';
    import { userUpdate } from '@/api/api.js';
    import { uploadsrc } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js';
    import md5 from 'js-md5';
    // 富文本
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';

    export default {
        name: 'basetable',
        data() {
            return {
                query: {
                    pageNum: 1,
                    pageSize: 10,
                    param: {
                        userId: '',
                        level: '',
                        agentName: '',
                        distinguish: '',
                        status: '',
                        contactName: ''
                    }
                },
                myHeaders: {},
                pageTotal: 0,
                tableData: [],
                goodsList: [],
                cate: [],
                form: {},
                imageUrl: '',
                business: [],
                orderList: [],
                certif: [],
                title: '',
                pdfData: {
                    type: 1,
                    path: 1
                },
                uploadsrc: '',
                editVisible: false,
                detailss: false,
                goodslist: false,
                orderlist: false
            };
        },
        created() {
            //用户列表
            this.tablist();
            this.uploadsrc = uploadsrc;
        },
        methods: {
            //用户列表
            tablist() {
                agentList(this.query).then(res => {
                    if (res.returnCode == 200) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = null;
                        this.pageTotal = 0;
                    }
                });
            },
            determine(row) {
                if (row.numericalValue == null) {
                    this.$message.error('请填写正确的数字!');
                    return;
                }
                if (row.numericalValue < 0) {
                    this.$message.error('请填写正确的数字!');
                    return;
                }
                if (row.shareType == 1) {
                    if (row.numericalValue >= 1 || row.numericalValue.length > 6) {
                        this.$message.error('请填写正确的百分比!');
                        return;
                    }
                }
                sharebenefilsUpadate(row).then(res => {
                    if (res.returnCode === 200) this.tablist();
                    this.$message.success('修改成功');
                    this.editVisible = false;
                }, err => {
                    console.log('err--', err);
                });
            },
            setUp(index, row) {
                this.title = '设置分利规则';
                this.idx = index;
                this.form = {};
                this.sharebenefilsdetail(row.id);
            },
            sharebenefilsdetail(id) {
                sharebenefilsDetail(id).then(res => {
                    if (res.returnCode == 200) {
                        var row = res.data;
                        this.form = row;
                        this.editVisible = true;
                    } else {

                    }
                });
            },
            orderLists(index, row) {
                this.title = '商品列表';
                this.idx = index;
                this.agentorderlist(row.id);
            },
            agentorderlist(id) {
                agentOrderList({ pageNum: 1, pageSize: 10, param: { agentId: id } }).then(res => {
                    if (res.returnCode == 200) {
                        this.orderList = res.data.list;
                        this.pageTotal = res.data.total;
                        this.orderlist = true;
                    } else {
                        this.$message.success('该代理商还未有过订单');
                        this.orderList = null;
                        this.pageTotal = 0;
                    }
                });
            },
            goodsLists(index, row) {
                this.title = '商品列表';
                this.idx = index;
                this.agentgoodslist(row.id);
            },
            agentgoodslist(id) {
                agentGoodsList({ pageNum: 1, pageSize: 10, param: { agentId: id } }).then(res => {
                    if (res.returnCode == 200) {
                        this.goodsList = res.data.list;
                        this.pageTotal = res.data.total;
                        this.goodslist = true;
                    } else {
                        this.$message.success('该代理商还未增加商品');
                        this.goodsList = null;
                        this.pageTotal = 0;
                    }
                });
            },
            agentdetails(id) {
                agentDetails(id).then(res => {
                    if (res.returnCode == 200) {
                        var row = res.data;
                        this.form = row;
                        this.business = [];
                        this.certif = [];
                        if (row.businessLicense) {
                            var detailBanners = row.businessLicense.indexOf(',') > -1 ? row.businessLicense.split(',') : [row.businessLicense];
                            this.form.businessLicense = detailBanners;
                            for (var i = 0; i < detailBanners.length; i++) {
                                var businessLicense = {
                                    url: detailBanners[i]
                                };
                                this.business.push(businessLicense);
                                console.log(this.business);
                            }
                        }
                        if (row.certificates) {
                            var certificatess = row.certificates.indexOf(',') > -1 ? row.certificates.split(',') : [row.certificates];
                            this.form.certificates = certificatess;
                            for (var i = 0; i < certificatess.length; i++) {
                                var certificates = {
                                    url: certificatess[i]
                                };
                                this.certif.push(certificates);
                            }
                        }
                        this.detailss = true;
                    }
                });
            },
            handleRemove(data) {
                var detailBanner = this.form.detailBanner;
                var index = detailBanner.indexOf(data.data);
                this.form.detailBanner.splice(index, 1);
            },
            uploadError(data) {
                this.$message.success(`上传失败，请重新上传`);
            },
            handleBeforeUpload(file) {
                this.handleimgtype(file);
                if (this.form.distributorUserId == null) {
                    alert('请先选择分销商');
                } else {
                    this.pdfData.path = this.form.distributorUserId;
                    this.getmyHeaders();
                }
            },
            getmyHeaders() {
                var dHeader = dynamicHeader();
                this.myHeaders.signature = dHeader.signature;
                this.myHeaders.nonce = dHeader.nonce;
                this.myHeaders.timestamp = dHeader.timestamp;
                this.myHeaders.appkey = dHeader.appkey;
                this.myHeaders.token = dHeader.token;
            },
            uploadSuccess(data) {
                if (data.returnCode == 200) {
                    this.form.detailBanner.push(data.data);
                } else {
                    this.$message.success(`上传失败，请重新上传`);
                }
            },
            open(index, row) {
                this.$confirm('确定申请通过吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.adopt(index, row);
                    this.$message({
                        type: 'success',
                        message: '已通过!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '未通过'
                    });
                });
            },
            //通过审核
            updateClick(form) {
                form.status = 2;
                this.stateClicks(form);
                this.detailss = false;
            },
            updateGoodsStatus(row) {

            },
            stateClicks(row) {
                agentUpdate({
                    id: row.id,
                    userId: row.userId,
                    status: row.status
                }).then(res => {
                    if (res.returnCode === 200) {
                        this.$message.success(row.status === 2 ? '已审核通过' : '已正常');
                        this.tablist();
                    }
                }, err => {
                    console.log('err--', err);
                });
            },
            stateClick(row) {
                if (row.status == 1) {
                    //等于1带审核 打开详情
                    this.agentdetails(row.id);
                } else if (row.status == 2) {
                    row.status = 3;
                    agentUpdate({
                        id: row.id,
                        status: row.status
                    }).then(res => {
                        if (res.returnCode === 200) {
                            this.$message.success(row.status === 3 ? '已冻结' : '解冻');
                            this.tablist();
                        }
                    }, err => {
                        console.log('err--', err);
                    });
                }else{
                    row.status = 2;
                    agentUpdate({
                        id: row.id,
                        status:row.status
                    }).then(res => {
                        if (res.returnCode === 200) {
                            this.$message.success(row.status === 3 ? '已冻结' : '解冻');
                            this.tablist();
                        }
                    }, err => {
                        console.log('err--', err);
                    });
                }
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageNum', val);
                this.tablist();
            },
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageNum', 1);
                this.tablist();
            }
        }
    };
</script>

<!-- css样式实现 -->
<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }

    /* 添加的 */
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 15px;
        color: #8c939d;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }

    .avatar {
        width: 50px;
        height: 50px;
        display: block;
    }

    .gray {
        color: #999999;
    }
</style>
